<!-- 单位编码维护 -->
<template>
  <div class="layout-container">
    <el-container class="layout-container" style="padding:10px;">
      <!-- 左侧start -->
      <el-aside width="250px" class="aside-container">
        <DwbmTree ref="DwbmTree" :refresh="refresh" @handleClickTreeNode="handleClickTreeNode"></DwbmTree>
      </el-aside>
      <!-- 左侧end -->
      <el-main class="amain-container">
        <div class="search-container">
          <!--<div>
            <el-input v-model="listQuery.dwbmSearch" size="mini" style="width:160px" placeholder="请输入单位编码"></el-input>
            <el-input v-model="listQuery.dwmcSearch" size="mini" style="width:160px" placeholder="请输入单位名称"></el-input>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="toSearch()" style="margin-left:10px">查询</el-button>
          </div>-->
          <div class="search-inp-container">
            <el-form :inline="true">
              <el-form-item label="单位编码">
                <el-input size="mini" placeholder="请输入单位编码" v-model="listQuery.dwbmSearch">
                </el-input>
              </el-form-item>
              <el-form-item label="单位名称">
                <el-input size="mini" placeholder="请输入单位名称" v-model="listQuery.dwmcSearch">
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="toSearch()" style="margin-left:10px">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="padding-top: 45px">
            <el-button v-if="czdwinfo.dwjb >= 4" size="mini" type="primary" icon="el-icon-plus" @click="toAdd()">新增</el-button>
            <span style="float: right">
              <el-button size="mini" type="primary" icon="el-icon-setting" @click="cccEvent('show', cccTable)">配置列</el-button>
              <el-button size="mini" type="primary" @click="cccEvent('export', cccTable)">导 出</el-button>
            </span>
          </div>
        </div>

        <div class="table-container">
          <el-table
            ref="multipleTable"
            size="mini"
            :data="dataList"
            v-loading="listLoading"
            height="100%"
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="序号" type="index" fixed="left" width="50" align="center"></el-table-column>
            <template v-for="col in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="col.id"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              ></el-table-column>
            </template>
            <el-table-column v-if="czdwinfo.dwjb >= 4" align="center" fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="primary" @click="toEdit(scope.row)"></el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="toDel(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.current"
            :page-size="listQuery.size"
            :page-sizes="[10, 20, 40, 80]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>

    <dwbmAdd ref="dwbmAdd" :addData="addData"></dwbmAdd> <!-- 新增页面 -->
    <dwbmEdit ref="dwbmEdit" :editData="editData"></dwbmEdit> <!-- 修改页面 -->
    <ccc ref="ccc"></ccc> <!-- 配置列 -->

  </div>
</template>

<script>
  import { getDwbmPage,deleteUnit} from "@/api/dmgl/dwbm";
  import { getUserInfo } from "@/utils/utilInfo.js";
  import Tree from "./modules/Tree";
  import dwbmAdd from "./modules/dwbmAdd";
  import dwbmEdit from "./modules/dwbmEdit";
  import ccc from "@/dialogCommom/ccc";
  import { mapGetters } from 'vuex'
  import { codeModulePrefix } from '../../../config'

  export default {
    name: "dwbm",
    components: {
      ccc: ccc,
      dwbmAdd: dwbmAdd,
      dwbmEdit: dwbmEdit,
      DwbmTree: Tree
    },
    data() {
      return {
        listLoading: false,
        total: 0,
        listQuery: {  //查询条件字段
          dwbmLike: '0',
          dwbmSearch: '',
          dwmcSearch: '',
          current: 1,
          size: 10
        },
        dataList: [],
        multipleSelection: [], //勾选的所有行数据
        cccTable: "code_dwbm", //列配置表名
        columnData: [], //列配置,
        treeNode: [], // 编码树节点数据
        addData: {
          show: false,
        },
        editData: {
          show: false,
          dwbm: ""
        },
        refresh:"", // 是否刷新树
      }
    },

    computed: {
      ...mapGetters(['czdwinfo'])
    },

    created() {
      const that = this
      let czdwinfo = null
      if (typeof that.czdwinfo == 'string') {
        czdwinfo = JSON.parse(that.czdwinfo)
      } else {
        czdwinfo = that.czdwinfo
      }
      if(czdwinfo.dwjb < 4 || czdwinfo.dwbm == getUserInfo.dwbm){
        this.listQuery.dwbmLike = "0"
      }else {
        this.listQuery.dwbmLike = czdwinfo.dwbm
      }
      that.getList();
    },

    mounted() {
      this.cccEvent("load", this.cccTable);
    },

    beforeUpdate() {
      //解决列配置引发的滚动条问题
      this.$nextTick(() => {
        this.$refs['multipleTable'].doLayout();
      });
    },

    methods: {
      // 点击树节点
      handleClickTreeNode(node){
        this.treeNode = node
        this.listQuery.dwbmLike = node.id
        this.getList()
      },
      // 选择table数据列
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 选择table数据列
      handleSelected(val) {
        this.rowData = val;
      },
      toSearch() {
        this.getList();
      },
      toAdd() {
        if(this.treeNode.length == 0){
          this.$message.warning("请选择单位树节点！");
          return;
        }
        const that = this
        let propAddData = {
          show: true,
          sjdw: this.treeNode.id
        }
        that.addData = propAddData
      },
      // 刷新树
      treeReload(val){
        if(this.refresh){
          this.refresh = ""
        }else{
          this.refresh = "refresh"
        }
      },
      toEdit(row){
        const that = this
        let propEditData = {
          show: true,
          dwbm: row.dwbm,
        }
        that.editData = propEditData
      },
      toDel(row){
        this.$confirm(
          '此操作将永久删除数据, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          deleteUnit(row.dwbm).then(res => {
            if (res.code == 0) {
              this.$message.success( "删除成功！");
              this.treeReload();
              this.getList();
            } else {
              this.$message.error("删除失败！");
            }
          });
        });
      },
      // 分页查询
      getList() {
        getDwbmPage(this.listQuery).then(response => {
          this.dataList = response.data.records;
          this.total = response.data.total;
          this.listLoading = false;
        })
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.getList();
      },
      /**
       * 配置列
       */
      cccEvent(method, table) {
        if (method == "show") {
          this.$refs['ccc'].show(table);
        } else if (method == "load") {
          new Promise((resolve) => {
            this.$nextTick(() => {
              resolve(this.$refs['ccc'].load(table));
            });
          }).then(response => {
            this.columnData = response;
          });
        } else if (method === "export") {
          let vo = {
            tableCode: table,
            param: this.listQuery,
            url: `${codeModulePrefix}/dm-dwbm/page`,
            method: "POST",
            fileName: "单位编码数据",
            total: this.total
          };
          this.$refs.ccc.exportExcel(vo);
        }
      },
    }
  }
</script>

<style scoped lang='scss'>
  .layout-container {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .aside-container {
    margin-right:10px;
    border:1px solid #DCDFE6;
  }
  .amain-container {
    padding:10px;
    border:1px solid #DCDFE6;
    overflow: hidden;
    height: 100%;
  }
  .search-container {
    width: 100%;
    overflow: hidden;
    padding-right: 0;
  }
  .table-container {
    width: 100%;
    height: 80%;
  }
  .pagination-container{
    text-align: center;
  }
  .search-inp-container /deep/ .el-form-item {
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .search-inp-container /deep/ .el-form-item__label {
    line-height: 41px;
  }
</style>
